<template>
    <div class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-row>
                    <el-form :inline="true" :model="listQuery" ref="dataList2" class="demo-form-inline">
                        <el-input class="marginRB10" v-model="listQuery.name" placeholder="技能名称" style="width:200px;" clearable></el-input>
                        <el-select v-model="listQuery.status" placeholder="显示状态" clearable="">
                            <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                            </el-option>
                        </el-select>
                        <el-button   el-button type="primary" @click="searchList" icon="el-icon-search" class="marginRB10">搜索</el-button>
                    </el-form>
                </el-row>
            </div>
            <div>
                <el-button type="primary" size="default" @click="handleAdd">新建</el-button>
                
            </div>
            <div class="item">
                <el-table v-loading="listLoading" ref="dataList" :data="menuList" style="margin-bottom: 20px;" border
                            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column prop="id" label="序号" width="80"></el-table-column>
                    <el-table-column prop="name" label="技能名称"></el-table-column>
                    <el-table-column prop="picture" label="图标">
                        <template slot-scope="scope">
                            <el-popover max-width="420" placement="right" trigger="hover">
                                <img :src="scope.row.picture" alt="" style="max-width: 200px;max-height: 200px">
                                <img slot="reference" :src="scope.row.picture" alt="" style="width: 50px;">
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bg_picture" label="首页背景图">
                        <template slot-scope="scope">
                            <el-popover max-width="420" placement="right" trigger="hover">
                                <img :src="scope.row.bg_picture" alt="" style="max-width: 200px;max-height: 200px">
                                <img slot="reference" :src="scope.row.bg_picture" alt="" style="width: 50px;">
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sort" label="排序"></el-table-column>
                    <el-table-column prop="level" label="段位等级" sortable>
                        <template slot-scope="{row}">
                            <span>{{ row.level.toString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="service" label="游戏区服">
                        <template slot-scope="{row}">
                            <span>{{ row.service.toString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="unit" label="价格单位" sortable></el-table-column>
                    <el-table-column prop="price" label="价格单价" sortable>
                        <template slot-scope="{row}">
                            <span>{{ row.price.toString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="max_hot_val" label="最大热力值" sortable></el-table-column>
                    <el-table-column prop="min_hot_val" label="最小热力值" sortable></el-table-column>
                    <el-table-column prop="status" label="显示状态">
                        <template slot-scope="{row}">
                            <el-tag :type="row.status === 1 ? 'success' : 'warning'">{{row.status === 0 ? '隐藏' : '显示'}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="技能类型">
                        <template slot-scope="{row}">
                            <el-tag :type="row.type === 1 ? 'success' : 'warning'">{{row.type === 0 ? '游戏' : '冥想'}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="unit_quantity" label="每次增加个数"></el-table-column>
                    <el-table-column prop="unit_desc" label="基础单位"></el-table-column>
                    <el-table-column prop="created_at" label="创建时间"></el-table-column>
                    <el-table-column label="操作" prop="date" width="300">
                        <template slot-scope="scope">
                            <el-button
                                icon="el-icon-edit"
                                plain
                                size="small"
                                type="primary"
                                @click="handleDialogShow(scope.row)"
                            >编辑
                            </el-button>
                            <el-button
                                plain
                                size="small"
                                type="primary"
                                @click="handleSet(scope.row)"
                            >设置冥想师
                            </el-button>
                            <el-button
                                icon="el-icon-delete"
                                plain
                                size="small"
                                type="danger"
                                @click="handleDelete(scope.row)"
                            >删除
                            </el-button>
                        </template>
                    </el-table-column>
        
                </el-table>
                <!-- 分页 -->
                <cus-pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="listQuery.page"
                    :limit.sync="listQuery.perPage"
                    @pagination="getList"
                />
            </div>
        </el-card>
        <el-dialog
            :title="title"
            :visible.sync="visible"
            width="30%"
            :close-on-click-modal="false"
            @close="closeD">
            <el-form :model="form" ref="form" :rules="rules" label-width="150px" :inline="false" size="normal">
                <el-form-item label="技能名称" prop="name">
                    <el-input v-model="form.name" maxlength="10" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="图标" prop="picture">
                    <el-upload
                        :http-request="customizeUpload"
                        :on-success="handleSuccessSpecial"
                        :show-file-list="false"
                        action=""
                        class="avatar-uploader"
                        >
                        <img v-if="form.picture" :src="form.picture" class="avatar"/>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="首页背景图" prop="picture">
                    <el-upload
                        :http-request="customizeUpload"
                        :on-success="handleSuccessSpecial1"
                        :show-file-list="false"
                        action=""
                        class="avatar-uploader"
                        >
                        <img v-if="form.bg_picture" :src="form.bg_picture" class="avatar"/>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="form.sort" placeholder="请输入排序"></el-input>
                </el-form-item>
                <el-form-item label="段位等级" prop="level">
                    <el-input v-model="form.level" placeholder="可输入多个段位等级，使用“,”分隔"></el-input>
                </el-form-item>
                <el-form-item label="游戏区服" prop="service">
                    <el-input v-model="form.service" placeholder="可输入多个游戏区服，使用“,”分隔"></el-input>
                </el-form-item>
                <el-form-item label="价格单位" prop="unit">
                    <el-input v-model="form.unit" placeholder="请输入价格单位"></el-input>
                </el-form-item>
                <el-form-item label="价格单价" prop="price">
                    <el-input v-model="form.price" placeholder="可输入多个价格单价，使用“,”分隔"></el-input>
                </el-form-item>
                <el-form-item label="最小热力值" prop="min_hot_val">
                    <el-input v-model="form.min_hot_val" placeholder="请输入最小热力值"></el-input>
                </el-form-item>
                <el-form-item label="最大热力值" prop="max_hot_val">
                    <el-input v-model="form.max_hot_val" placeholder="请输入最大热力值"></el-input>
                </el-form-item>
                <el-form-item label="是否显示" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">显示</el-radio>
                        <el-radio :label="0">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="技能类型" prop="type">
                    <el-select v-model="form.type" placeholder="请选择" clearable="">
                        <el-option
                            v-for="item in options2"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="每次增加个数" prop="unit_quantity">
                    <el-input v-model="form.unit_quantity" placeholder="请输入每次增加个数"></el-input>
                </el-form-item>
                <el-form-item label="基础单位" prop="unit_desc">
                    <el-input v-model="form.unit_desc" placeholder="请输入基础单位"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除 -->
        <el-dialog
            :visible.sync="deleteDialogVisible"
            title="删除"
            width="435px"
        >
            <span style=""><em style="font-style: normal; color: red">确定要删除？</em></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleConfirmDel">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 冥想师 -->
        <el-dialog
            title="设置冥想师"
            :visible.sync="visible2"
            width="30%"
            :close-on-click-modal="false"
            @close="closeD">
            <el-form :model="formSetUpData" ref="formSetUp" :rules="formSetUpDataRules" label-width="150px" :inline="false" size="normal">
                <el-form-item label="用户编号" prop="user_code">
                    <el-input v-model="formSetUpData.user_code" placeholder="请输入用户编号"></el-input>
                </el-form-item>
                
                <el-form-item label="游戏ID" prop="game_id">
                    <el-input v-model="formSetUpData.game_id" placeholder="请输入游戏ID" disabled></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible2 = false">取 消</el-button>
                <el-button type="primary" @click="handleConfirmSet">确 定</el-button>
            </span>
        </el-dialog>
        
    </div>
</template>
  
<script>
  import {accompanyList, accompanyCreate, accompanyUpdate, accompanyDel, accompanyCreateUser} from '@/api/playManagement'
  
    export default {
        data() {
        return {
            visible2: false,
            title: '',
            visible: false,
            banReasonForm: {},
            banIpDialogVisible: false,
            deleteDialogVisible: false,
            options: [
                {
                    label: '显示',
                    id: 1
                },
                {
                    label: '隐藏',
                    id: 0
                }
            ],
            options2: [
                {
                    label: '冥想',
                    id: 1
                },
                {
                    label: '游戏',
                    id: 0
                }
            ],
            listLoading: true,
            total: 0,
            listQuery: {
                page: 1,
                perPage: 10,
                status: undefined,
                name: undefined,
            },
            menuList: [],
            dialogFormVisible: false,
            dialogStatus: '',
            titleMap: {
            update: '编辑',
            create: '增加'
            },
            form: {
                id: undefined,
                name: undefined,
                picture: undefined,
                level: undefined,
                service: undefined,
                price: undefined,
                status: undefined,
                sort: undefined,
                unit: undefined,
                bg_picture: undefined,
                min_hot_val: undefined,
                max_hot_val: undefined,
                unit_quantity: undefined,
                unit_desc: undefined,
                type: undefined
            },
            rules: {
                name: [{required: true, message: '请输入名字', trigger: 'blur'}],
                picture: [{required: true, message: '请上传游戏图标', trigger: 'blur'}],
                level: [{required: true, message: '请输入游戏等级', trigger: 'blur'}],
                service: [{required: true, message: '请输入游戏区服', trigger: 'blur'}],
                price: [{required: true, message: '请输入游戏价格', trigger: 'blur'}],
                status: [{required: true, message: '请选择', trigger: 'blur'}],
                sort: [{required: true, message: '请输入排序', trigger: 'blur'}],
                unit: [{required: true, message: '请输入价格单位', trigger: 'blur'}],
                max_hot_val: [{required: true, message: '请输入最大热力值', trigger: 'blur'}],
                min_hot_val: [{required: true, message: '请输入最小热力值', trigger: 'blur'}],
                bg_picture: [{required: true, message: '请上传首页背景图', trigger: 'blur'}],
            },
            formSetUpData: {
                game_id: undefined,
                user_code: undefined,
            },
            formSetUpDataRules: {
                game_id: [{required: true, message: '请输入', trigger: 'blur'}],
                user_code: [{required: true, message: '请输入', trigger: 'blur'}],
            },
        }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.listLoading = true
                for (let key in this.listQuery) {
                    this.listQuery[key] =
                    this.listQuery[key] === "" ? undefined : this.listQuery[key];
                }
        
                accompanyList(this.listQuery).then(({data: {data, total}}) => {
                    this.menuList = data
                    this.total = total
                    this.listLoading = false
                })
            },
            searchList() {
                this.listQuery.page = 1
                this.getList()
            },
            handleDialogShow(row) {
                this.title = '编辑'
                row.level = row.level.toString()
                row.price = row.price.toString()
                row.service = row.service.toString()
                this.form = JSON.parse(JSON.stringify(row))
                this.visible = true
            },
            postAccompanyUpdate(data) {
                accompanyUpdate(data).then(res => {
                    if(res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.visible = false
                        this.getList()
                    }
                })
            },
            handleDelete(row) {
                this.del_ids = row.id;
                this.deleteDialogVisible = true;
            },
            handleConfirmDel() {
                accompanyDel(this.del_ids).then(res => {
                    if(res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.deleteDialogVisible = false
                        this.getList()
                    }
                })
            },
            handleConfirm() {
                this.$refs['form'].validate(async valid => {
                    if (valid) {
                        if(this.title === '新建') {
                            this.postAccompanyCreate(this.form)
                        }else if(this.title === '编辑'){
                            this.postAccompanyUpdate(this.form)
                        }
                    }
                })
                
            },
            handleSet(row) {
                this.visible2 = true
                this.formSetUpData = {
                    game_id: row.id,
                    user_code: row.user_code,
                }
            },
            handleConfirmSet() {
                this.$refs['formSetUp'].validate(async valid => {
                    if (valid) {
                        accompanyCreateUser(this.formSetUpData).then(res => {
                            if(res.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '操作成功'
                                })
                                this.visible2  = false
                                this.getList()
                            }
                        })
                    }
                })
            },
            postAccompanyCreate(data) {
                accompanyCreate(data).then(res => {
                    if(res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.visible = false
                        this.getList()
                    }
                })
            },
            handleSuccessSpecial() {
                this.form.picture = this.ossLastImgUrl
            },
            handleSuccessSpecial1() {
                this.form.bg_picture = this.ossLastImgUrl
            },
            closeD() {
                this.title = ''
                this.form = {
                    id: undefined,
                    name: undefined,
                    picture: undefined,
                    level: undefined,
                    service: undefined,
                    price: undefined,
                    status: undefined,
                    sort: undefined,
                    unit: undefined,
                    bg_picture: undefined,
                    min_hot_val: undefined,
                    max_hot_val: undefined,
                    unit_quantity: undefined,
                    unit_desc: undefined,
                    type: undefined
                }
                this.formSetUpData = {
                    game_id: undefined,
                    user_code: undefined,
                }
            },
            handleAdd() {
                this.title = '新建'
                this.form = {
                    id: undefined,
                    name: undefined,
                    picture: undefined,
                    level: undefined,
                    service: undefined,
                    price: undefined,
                    status: undefined,
                    sort: undefined,
                    unit: undefined,
                    bg_picture: undefined,
                    min_hot_val: undefined,
                    max_hot_val: undefined
                }
                this.visible = true
            }
        }
    }
</script>
<style scoped lang="scss">
[v-cloak] {
    display: none;
}

::v-deep.avatar-uploader .el-upload {
    border        : 1px dashed #d9d9d9;
    border-radius : 6px;
    cursor        : pointer;
    position      : relative;
    overflow      : hidden;
}

.avatar-uploader .el-upload:hover {
    border-color : #409eff;
}

.avatar-uploader-icon {
    font-size   : 28px;
    color       : #8c939d;
    width       : 100px;
    height      : 100px;
    line-height : 100px;
    text-align  : center;
}

.avatar {
    width   : 100px;
    height  : 100px;
    display : block;
}
  
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
  
.clearfix:after {
    clear: both
}
  
.box-card {
    width: 100%;
}
  
.demo-form-inline {
    float: right;
}
::v-deep {
    .el-card__header {
        padding-bottom: 0;
    }
} 
</style>
  